
<template>
  <div id="app" style="background-color:#f3f3f3;height:100%;">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">任务列表</h1>
      <div class="mint-header-button is-right" />
    </header>

    <mt-navbar v-model="status" class="page_part">
      <mt-tab-item id="1">未完成</mt-tab-item>
      <mt-tab-item id="2">已完成</mt-tab-item>
    </mt-navbar>

    <mt-tab-container v-model="status">
      <mt-tab-container-item id="1">
        <div v-for="(item, index) in list" :key="index" style=" margin-top:10px;padding:15px 15px;background:#fff;display:flex;justify-content:space-between;align-items:center;" @click="goinfo(item)">
          <div>
            <div style="font-size:16px;font-weight:bold;float:left;line-height:22px;margin-right:5px;">{{ item.hash.taskname }}</div>
            <div :style="{'background-color': item.hash.tasklevelcolor}" style="float:left; font-size:12px; border-radius:20px;padding:3px 5px;color:#fff;">{{ item.hash.tasklevelname }}</div>
            <div style="clear:both;" />
            <div style="font-size:14px;margin-top:5px;" v-if="item.hash.taskdate==''">预计完成:暂无</div>
            <div style="font-size:14px;margin-top:5px;" v-else>预计完成:{{ item.hash.taskdate }}</div>
          </div>
          <div>
            <mt-button v-if="pagetype=='1'" type="primary" style="width:60px;height:32px;font-size:14px;" @click="submitcar(item)">完成</mt-button>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">

        <div v-for="(item, index) in list1" :key="index" style=" margin-top:10px;padding:15px 15px;background:#fff;display:flex;justify-content:space-between;align-items:center;" @click="goinfo(item)">

          <div>
            <div style="font-size:16px;font-weight:bold;float:left;line-height:22px;margin-right:5px;">{{ item.hash.taskname }}</div>
            <div :style="{'background-color': item.hash.tasklevelcolor}" style="float:left; font-size:12px; border-radius:20px;padding:3px 5px;color:#fff;">{{ item.hash.tasklevelname }}</div>

            <div style="clear:both;" />
            <div style="font-size:14px;margin-top:5px;">完成时间:{{ item.hash.finishdate }}</div>
          </div>
          <div>
            已完成
          </div>
        </div>
      </mt-tab-container-item>

    </mt-tab-container>

    <!-- 任务列表 -->

  </div>

</template>

<script>
export default {
  name: 'PageNavbar',
  data () {
    return {
      list: [],
      list1: [],
      htitle: '任务列表',
      content: '',
      ts: this.newStore(),
      status: '1',
      pagetype: ''

    }
  },
  created () { },
  mounted () {
    console.log(this.$route.query.pagetype, 'name1')

    if (this.$route.query.pagetype) {
      this.pagetype = this.$route.query.pagetype
    }
    this.getrenwulist()
  },

  methods: {
    goinfo (item) {
      this.$router.push({
        name: 'task_details',
        query: { taskid: item.hash.taskid, pagetype: this.pagetype }
      })
    },
    submitcar (item) { },
    getrenwulist () {
      const req = {
        handle: '1FA998754EC78E7DD6F3513F0FEA536D012084477059BDA5',
        query: '',
        tasklevel: '',
        createdate_begin: '',
        createdate_end: '',
        taskdate_begin: '',
        taskdate_end: '',
        status: '0'
      }

      const req1 = {
        handle: '1FA998754EC78E7DD6F3513F0FEA536D012084477059BDA5',
        query: '',
        tasklevel: '',
        createdate_begin: '',
        createdate_end: '',
        taskdate_begin: '',
        taskdate_end: '',
        status: '1'
      }
      //不同页面进入传不同参数
      if (this.pagetype == '1') {
        req.chargeruser = localStorage.getItem('pid');
        req1.chargeruser = localStorage.getItem('pid');
      } else if (this.pagetype == '2') {
        req.noticeruser = localStorage.getItem('pid');
        req1.noticeruser = localStorage.getItem('pid');
      } else if (this.pagetype == '3') {
        req.createuser = localStorage.getItem('pid');
        req1.createuser = localStorage.getItem('pid');
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.list = ts.d.data.operation1
        }
        console.log(this.list)
      })
      this.spost(this.ts, '/mainservlet', req1).then(ts => {
        if (ts.d.sflag == 'success') {
          this.list1 = ts.d.data.operation1
        }
        console.log(this.list1)
      })

    },
    goback () {
      this.$router.push({ name: 'task', query: { name: '任务' } })
    },
    option () {
      this.$router.push({
        name: 'task',
        query: {
          name: ''
        }
      })
    }
  }
}
</script>
<style>
html,
body,
#app {
  height: 100%;
}
.mr_5 {
  margin-right: 5px;
}
.anniu {
  float: left;
  border-radius: 2px;
  border: 1px solid #f3f3f3;
  background-color: white;
  padding: 10px;
}

.border_b {
  border-bottom: 1px solid #f3f3f3;
  width: 94%;
  margin: 0 auto;
  padding: 10px;
}
a {
  text-decoration: none;
}

.mt_10 {
  margin-top: 10px;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.mint-navbar .mint-tab-item.is-selected {
  margin-bottom: 0px !important;
  border-bottom: 3px solid #26a2ff;
}
</style>
